/* ----------  base  ---------- */
*,
*::before,
*::after { box-sizing:border-box; }

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:#f7f7fc;
  color:#21243d;
}

/* ----------  header  ---------- */
.hero {
  position: relative;
  height: 35vh; /* use 35% of the screen height */
  background: url('../assets/header-bg.png') no-repeat left center;
  background-size: cover;
  color: #fff;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* overlay layer */
.hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.3); /* dark semi-transparent overlay */
  z-index: 0;
}

/* ensure text content sits above overlay */
.hero h1 {
  position: relative;
  z-index: 1;
  font-size: clamp(1.5rem, 5vw, 3rem);
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1rem;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}


/* ----------  grid  ---------- */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:6rem 2rem;
  max-width:1040px;
  margin:4rem auto 0;   /* ← add 4 rem (or adjust)   */
  padding:0 1rem 4rem;
}

/* ----------  tool card  ---------- */
.tool-card{
  text-decoration:none;
  background:#fff;
  border-radius:1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.05);
  padding:4.5rem 1.75rem 2rem;      /* space for icon circle */
  text-align:center;
  transition:.2s ease;
  position:relative;
  color:inherit;
}
.tool-card:hover{ transform:translateY(-4px); box-shadow:0 16px 32px rgba(0,0,0,.06); }

.icon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #fad0c4, #ffd1ff, #a18cd1);
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #fff;
  border: 6px solid #fff;
  box-shadow: 0 6px 18px rgba(161, 140, 209, 0.3); /* softened shadow to match new colors */
}

/* headings & body */
.tool-card h2{
  margin:.5rem 0 .75rem;
  font-size:1.35rem;
  font-weight:700;
}
.tool-card p{
  margin:0;
  font-size:.95rem;
  line-height:1.5;
  color:#54586c;
}

/* ----------  footer  ---------- */
.footer{
  text-align:center;
  padding:2rem 0 3rem;
  font-size:.9rem;
  color:#7b7e96;
}